<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .test {
      width: 200px;
      height: 200px;
    }
    .test img:last-child {
      position: relative;
      top: -100px;
      margin: -20px 0 0 0;
      opacity: 0; /*设置透明度0->隐藏*/
      transition: all 0.3s ease-in; /*设置缓慢0.3秒出现的动画*/
    }
    .test:hover img:last-child {
      opacity: 1;
    }
  </style>
  <body>
    <div class="test">
      <img
        src="https://i8.mifile.cn/b2c-mimall-media/98a23aae70f25798192693f21c4d4039.png"
        class="icon"
      /><img
        src="https://i8.mifile.cn/b2c-mimall-media/74c4fcb4475af8308e9a670db9c01fdf.png"
        class="hover"
      />
    </div>
  </body>
</html>
